<template>
  <!-- 日历组件的模板内容，这里需要根据实际渲染逻辑编写，比如循环生成日期格子等 -->
  <view class="calendar-container">
    <!-- 头部：年月切换、回到今天等 -->
    <view class="calendar-header">
      <text @click="prevMonth">←</text>
      <text>{{ year }}年{{ month }}月</text>
      <text @click="nextMonth">→</text>
      <text @click="backToToday">回到今天</text>
    </view>
    <!-- 星期栏 -->
    <view class="week-bar">
      <text v-for="(week, index) in weeks" :key="index">{{ week }}</text>
    </view>
    <!-- 日期格子 -->
    <view class="date-grid">
      <view
        v-for="(dateItem, index) in dateList"
        :key="index"
        :class="{
          'date-item': true,
          'current-date': dateItem.isCurrent,
          'selected-date': dateItem.isSelected,
          'other-month': !dateItem.isCurrentMonth
        }"
        @click="handleDateClick(dateItem)"
      >
        <text>{{ dateItem.date }}</text>
        <text class="lunar-text">{{ dateItem.lunar }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    date: {
      type: String,
      default: ''
    },
    selected: {
      type: Array,
      default() {
        return [];
      }
    },
    // 补全是否开启限制日期的 props
    isLimitDate: {
      type: Boolean,
      default: false
    },
    // 补全限制的开始日期
    limitStartDate: {
      type: String,
      default: ''
    },
    // 补全限制的结束日期
    limitEndDate: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      year: '',
      month: '',
      dateList: [],
      weeks: ['日', '一', '二', '三', '四', '五', '六']
    };
  },
  mounted() {
    this.initCalendar();
  },
  methods: {
    initCalendar() {
      // 初始化日历，获取当前年月，生成日期列表等逻辑
      const now = this.date ? new Date(this.date) : new Date();
      this.year = now.getFullYear();
      this.month = now.getMonth() + 1;
      this.generateDateList();
    },
    generateDateList() {
      // 生成当月的日期列表，包括前后月份的补位日期，以及农历等信息
      const year = this.year;
      const month = this.month;
      const firstDay = new Date(year, month - 1, 1);
      const lastDay = new Date(year, month, 0);
      const firstDayWeek = firstDay.getDay();
      const lastDayDate = lastDay.getDate();
      
      const dateList = [];
      // 补上前一个月的日期
      for (let i = firstDayWeek - 1; i >= 0; i--) {
        const prevMonthLastDay = new Date(year, month - 1, 0).getDate();
        const date = prevMonthLastDay - i;
        dateList.push({
          date,
          year: month === 1 ? year - 1 : year,
          month: month === 1 ? 12 : month - 1,
          isCurrentMonth: false,
          isCurrent: false,
          isSelected: false,
          lunar: this.getLunar(year, month - 1, date) // 假设存在获取农历的方法
        });
      }
      // 生成当月日期
      for (let i = 1; i <= lastDayDate; i++) {
        const isCurrent = this.isCurrentDate(year, month, i);
        const isSelected = this.isSelectedDate(year, month, i);
        dateList.push({
          date: i,
          year,
          month,
          isCurrentMonth: true,
          isCurrent,
          isSelected,
          lunar: this.getLunar(year, month - 1, i)
        });
      }
      // 补上后一个月的日期
      const nextMonthCount = 42 - dateList.length; // 假设日历显示 6 行，共 42 个格子
      for (let i = 1; i <= nextMonthCount; i++) {
        dateList.push({
          date: i,
          year: month === 12 ? year + 1 : year,
          month: month === 12 ? 1 : month + 1,
          isCurrentMonth: false,
          isCurrent: false,
          isSelected: false,
          lunar: this.getLunar(year, month, i)
        });
      }
      this.dateList = dateList;
    },
    isCurrentDate(year, month, date) {
      // 判断是否为当前日期
      const now = new Date();
      return (
        year === now.getFullYear() &&
        month === now.getMonth() + 1 &&
        date === now.getDate()
      );
    },
    isSelectedDate(year, month, date) {
      // 判断日期是否在 selected 数组中
      const fullDate = `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
      return this.selected.includes(fullDate);
    },
    getLunar(year, month, date) {
      // 这里是获取农历的逻辑，实际开发中可能需要引入农历库或者自己实现逻辑
      // 此处只是模拟返回
      return '农历模拟';
    },
    prevMonth() {
      // 切换到上个月
      if (this.month === 1) {
        this.year--;
        this.month = 12;
      } else {
        this.month--;
      }
      this.generateDateList();
      this.setEmit('change');
    },
    nextMonth() {
      // 切换到下个月
      if (this.month === 12) {
        this.year++;
        this.month = 1;
      } else {
        this.month++;
      }
      this.generateDateList();
      this.setEmit('change');
    },
    backToToday() {
      // 回到今天
      const now = new Date();
      this.year = now.getFullYear();
      this.month = now.getMonth() + 1;
      this.generateDateList();
      this.setEmit('change');
    },
    handleDateClick(dateItem) {
      // 处理日期点击事件，比如选中日期等
      if (this.isLimitDate) {
        const currentFullDate = `${dateItem.year}-${dateItem.month.toString().padStart(2, '0')}-${dateItem.date.toString().padStart(2, '0')}`;
        if (this.limitStartDate && new Date(currentFullDate) < new Date(this.limitStartDate)) {
          return;
        }
        if (this.limitEndDate && new Date(currentFullDate) > new Date(this.limitEndDate)) {
          return;
        }
      }
      // 这里可以添加选中日期的逻辑，比如将日期添加到 selected 数组等
      this.setEmit('dateClick', dateItem);
    },
    setEmit(name) {
      // 对应你提供的 setEmit 方法
      let { year, month, date, fullDate, lunar, extraInfo } = this.getEmitData();
      this.$emit(name, {
        range: this.cate.multipleStatus,
        year,
        month,
        date,
        fullDate,
        lunar,
        extraInfo: extraInfo || {}
      });
    },
    getEmitData() {
      // 获取要发射的数据，这里需要根据实际逻辑获取，比如当前选中的日期等
      // 模拟数据
      return {
        year: this.year,
        month: this.month,
        date: new Date().getDate(),
        fullDate: `${this.year}-${this.month.toString().padStart(2, '0')}-${new Date().getDate().toString().padStart(2, '0')}`,
        lunar: '农历模拟',
        extraInfo: {}
      };
    }
  }
};
</script>

<style scoped>
/* 这里添加日历组件的样式，比如布局、颜色等 */
.calendar-container {
  width: 100%;
  background-color: #fff;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.week-bar {
  display: flex;
  justify-content: space-around;
  padding: 5px 0;
}
.date-grid {
  display: flex;
  flex-wrap: wrap;
}
.date-item {
  width: 14.28%;
  text-align: center;
  padding: 5px 0;
}
.current-date {
  background-color: #007aff;
  color: #fff;
}
.selected-date {
  background-color: #f0f0f0;
}
.other-month {
  color: #ccc;
}
.lunar-text {
  font-size: 12px;
}
</style>